Vue 实现二个下拉框的联动 |
您所在的位置：网站首页 › vue 下拉框 三级联动 › Vue 实现二个下拉框的联动 |
Vue 实现二个下拉框的联动
|
功能： 实现选择 机构，部门展示属于机构的列表 1：定义二个下拉框，按照组件绑定好，机构选定下拉项的时候给一个改变事件 2：定义好变量 export default { data() { return { form: { organ: "", dept: "", }, organOptions: [], deptOptions: [], } } }3：实现以及调用的方法 mounted() { this.getOptions(); }, //机构方法 getOptions() { axios({ url: "XXX", method: "post" }).then(res => { if (res.data.code === 200) { this.organOptions = res.data.data; } }); },4：选择一个框的时候，记得将这个框的参数带过去给另一个框的接口 //部门方法 getdept(){ axios({ url: "XXX", method: "post", params:{ departname:this.form.organ //第一个框的v-model的那个参数 }, }).then(res => { console.log('部门',res); if (res.data.code === 200) { this.deptOptions = res.data.data; } }); }, |
【本文地址】
今日新闻 |
推荐新闻 |